<template>
    <el-card>
        <el-form :inline="true">
            <el-form-item label="一级分类" style="width: 30%;">
                <el-select v-model="categoryStore.c1Id" @change="handler">
                    <el-option v-for="(c1, index) in categoryStore.c1Arr" :key="c1.id" :label="c1.name" :value="c1.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="二级分类" style="width: 30%;">
                <el-select v-model="categoryStore.c2Id" @change="handler2">
                    <el-option :label="c2.name" v-for="(c2, index) in categoryStore.c2Arr" :key="c2.id"
                        :value="c2.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="三级分类" style="width: 30%;">
                <el-select v-model="categoryStore.c3Id">
                    <el-option :label="c3.name" v-for="(c3, index) in categoryStore.c3Arr" :key="c3.id"
                        :value="c3.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script setup lang='ts'>
import { onMounted } from 'vue';
import useCategoryStore from '@/store/modules/category';
let categoryStore = useCategoryStore();
onMounted(() => {
    getC1();
})
const getC1 = () => {
    categoryStore.getC1();
}
//选中一级分类菜单选项时会触发
const handler = () => {
    //将二级和三级分类数据清空
    categoryStore.c2Id = '';
    categoryStore.c2Arr = [];
    categoryStore.c3Arr = [];
    categoryStore.c3Id = '';
    categoryStore.getC2();
}
//选中二级分类菜单选项时会触发
const handler2 = () => {
    categoryStore.c3Arr = [];
    categoryStore.c3Id = '';
    categoryStore.getC3();
}
</script>

<style></style>